<template>
    <div class="frame">
        <div class="count" v-if="vue2Flag">
            <h2>模拟Vue2中实现响应式</h2>
            <div>姓名： {{ vue2.name }}</div>
            <div>年龄： {{ vue2.age }}</div>
            <div>性别： {{ vue2.sex }}</div>
            <div>爱好： {{ vue2.hobby }}</div>

            <div style="margin-top: 10px;">
                <button @click="onAge">加一岁</button>
                <button @click="onSex">我是男</button>
                <button @click="onHobby">我不喜欢篮球，喜欢画画了</button>
            </div>
        </div>
        <div class="count2" v-if="vue3Flag">
            <h2>模拟Vue3中实现响应式</h2>
            <div>姓名： {{ vue3.name }}</div>
            <div>年龄： {{ vue3.age }}</div>
            <div>性别： {{ vue3.sex }}</div>
            <div>爱好： {{ vue3.hobby }}</div>

            <div style="margin-top: 10px;">
                <button @click="onAge2">加一岁</button>
                <button @click="onSex2">我是女</button>
                <button @click="onHobby2">我不喜欢篮球，喜欢画画了</button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import useReactive from './useReactive';

interface Person {
    name?: string
    age?: number
    sex?: string
    hobby?: string[]
    [x: string]: any
}
//源数据
let person: Person = {
    name: '张三',
    age: 18,
    hobby: ['篮球', '羽毛球', '乒乓球']
}, person2: Person = {
    name: '李四',
    age: 18,
    hobby: ['篮球', '羽毛球', '乒乓球']
}

//模拟Vue2中实现响应式
let vue2: Person = {}, vue2Flag = ref(true), vue3Flag1 = ref(true);

const test = ref({ a: { b: 1 }});

console.log(test)


Object.keys(person).forEach(item => {
    Object.defineProperty(vue2, item, {
        configurable: true,
        get() { //有人读取name时调用
            return person[item]
        },
        set(value) { //有人修改name时调用
            console.log(`有人修改了${item}属性，我发现了，我要去更新界面！`)
            vue2Flag.value = false;
            person[item] = value
            setTimeout(() => {
                vue2Flag.value = true;
            }, 0);
        }
    })

})

const onAge = () => {
    if (vue2.age)
        vue2.age += 1;
}
const onSex = () => {
    vue2.sex = '男';
}
const onHobby = () => {
    if (vue2.hobby)
        vue2.hobby[0] = '画画';
}

const onAge2 = () => {
    if (vue3.age)
        vue3.age += 1;
}
const onSex2 = () => {
    vue3.sex = '女';
}
const onHobby2 = () => {
    if (vue3.hobby)
        vue3.hobby[0] = '画画';
}

//模拟Vue3中实现响应式
const { vue3Flag, reactiveFn } = useReactive();
const vue3 = reactiveFn(person2);

console.log(1111, vue3)

// let obj = {a:1,b:2}
//通过Object.defineProperty去操作
// try {
// 	Object.defineProperty(obj, 'c', {
// 		get() {
// 			return 3
// 		}
// 	})
// 	Object.defineProperty(obj, 'c', {
// 		get() {
// 			return 4
// 		}
// 	})
// } catch (error) {
// 	console.log(error)
// }

//通过Reflect.defineProperty去操作
// const x1 = Reflect.defineProperty(obj, 'c', {
// 	get() {
// 		return 3
// 	}
// })
// console.log(x1)

// const x2 = Reflect.defineProperty(obj, 'c', {
// 	get() {
// 		return 4
// 	}
// })
// if (x2) {
// 	console.log('某某某操作成功了！')
// } else {
// 	console.log('某某某操作失败了！')
// }

// console.log('@@@')
</script>

<style scoped lang="scss">
.frame {
    height: 100%;
    display: flex;
    flex-direction: column;

    h2 {
        line-height: 50px;
    }

    .count {
        background-color: skyblue;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;

    }

    .count2 {
        background-color: orange;
        margin-top: 20px;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
}
</style>